<template>
  <div class="header">
    <div class="header-left">
      中部地区
      <van-icon name="arrow" />
    </div>
    <div class="header-right">
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>
  </div>

  <van-swipe class="my-swipe" :autoplay="3000" height="170" indicator-color="white">
    <van-swipe-item v-for="item in indexList.slides" :key="item.id">
      <van-image :src="item.pic_image_url" radius='5' />
    </van-swipe-item>
  </van-swipe>

  <van-row justify="space-around" style=" margin-top:5px">
    <van-col span="11" v-for="(item,index) in  indexList.nav2s" :key="item.id" @click="goOrderTwo(index)">
      <van-image :src="item.pic_image_url" />
    </van-col>
  </van-row>

  <van-row class="yy-list" @click="getOrder(item)" v-for="(item,index) in indexList.hospitals" :key="item.id"
    justify="space-around">
    <van-col span="6">
      <van-image width="100" height="90" :src="item.avatar_url" />
    </van-col>
    <van-col span="15" class="yy">
      <div class="yy-name">{{item.name}}</div>
      <div class="yy-type">
        <span>{{item.rank}}</span>
        &nbsp
        <span>{{item.label}}</span>
      </div>
      <div class="yy-text">{{item.intro}}</div>
    </van-col>
  </van-row>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { layoutIndex } from '../../api/index.js'
  const router = useRouter()
  const value = ref('');
  const indexList = reactive({
    hospitals: [],
    nav2s: [],
    navs: [],
    slides: []
  })

  onMounted(() => {
    layoutIndex().then(({ data: { data } }) => {
      // console.log(data);
      indexList.navs = data.navs
      indexList.hospitals = data.hospitals
      indexList.nav2s = data.nav2s
      indexList.slides = data.slides
    })
  })
  // 快捷入口
  const goOrderTwo = (index) => {
    router.push(`/createOrder?id=${indexList.hospitals[index].id}`)
  }

  // 点击医院列表
  const getOrder = (data) => {
    router.push(`/createOrder?id=${data.id}`)
  }
</script>
<style lang="less" scoped>
  .header {
    display: flex;
    justify-content: space-between;
    margin: 5px;
    line-height: 54px;

    .header-left {
      padding-left: 22px;
      background: url() no-repeat left center;
      background-size: 20px;
      font-size: 20px;
      font-weight: bold;
      color: #666666;
    }
  }

  .my-swiper {
    margin: 5px;
  }

  .yy-list {
    padding-bottom: 10px;
    margin: 20px 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04), 0 1px 6px 0 rgba(0, 0, 0, 0.04);

    .yy {
      .yy-name {
        font-size: 20px;
        line-height: 30px;
        font-weight: bold;
      }

      .yy-type {
        font-weight: bold;
        line-height: 25px;
        font-size: 15px;
        color: #0ca7ae;
      }

      .yy-text {
        font-size: 14px;
        color: #999999;
      }
    }
  }

  .bottom-text {
    line-height: 50px;
    text-align: center;
    color: #999999;
  }
</style>